<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>两列左侧自适应布局</title>
	<meta name="keywords" content=""/>
	<meta name="description" content=""/>
	<meta name="viewport" content="width=device-width"/>
	<link rel="stylesheet" href=""/>
	<link rel="shortcut icon" href="img/touchicon.png"/>
	<style>
		body{margin:0;padding:0;}
		.mn{margin:10px;}
		.mn-lt{
			position:relative;  /*提高z方向上的层级，避免右侧的容器遮盖左侧区域*/
			float:left;
			height:150px;  /*定高用于显示效果，实际布局高度由内容确定*/
			width:190px;
			background:#ff0097;
		}
		.mn-rt{
			float:right;
			width:100%;  /*使右侧容器宽度等于其父元素宽度，自动相对其父元素（窗口计算）*/
			margin-left:-200px;  /*使右侧容器能够浮动到 和左侧容易“同行”*/
		}
		.mn-rt .mn-rt-cont{
			margin-left:200px;  /*是右侧内容部分右移，防止遮盖左侧元素*/
			height:150px;  /*定高用于显示效果，实际布局高度由内容确定*/
			background:#4eb3b9;
		}
	</style>
</head>
<body>
	<div class="mn">
		<div class="mn-lt">
			左侧定宽
		</div>
		<div class="mn-rt">
			<div class="mn-rt-cont">
				央视网消息：中共中央、国务院、中央军委今天上午在北京人民大会堂隆重举行庆祝中国人民解放军建军90周年大会。中共中央总书记、国家主席、中央军委主席习近平发表重要讲话。中共中央政治局常委、国务院总理李克强主持大会。中共中央政治局常委张德江、俞正声、刘云山、王岐山、张高丽出席大会。
			</div>
		</div>
	</div>
</body>
</html>